<%--
  Created by IntelliJ IDEA.
  User: TOTORO
  Date: 2021/7/11
  Time: 16:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/nav.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/iconFont/iconfont.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user/receipt_address.css"/>
    <%--    element  vue--%>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css">
</head>
<body>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/frame/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/frame/totoro-utils.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.3/lib/index.js"></script>
<%-- 因为是独立页面， 所以需要再做一次用户判断--%>

<div class="address" style="width: 850px; margin-left: 25%;">
    <div class="headTips"><span class="ht-type">新增收货地址</span></div>
    <input type="hidden" name="isUpdate" id="isUpdate" value="${update?1:0}">
    <div id="myForm" class="next-form next-medium" style="width: 50%";>
        <input type="hidden" id="url" value='/user_logic/${update?"update_address.htm":"insert_address.htm"}'>
        <c:if test="${update}">
            <input type="hidden" name="id" id="id" value="${address.id}">
        </c:if>
        <div class="cndzkEntrance" id="cndzkEntrance">
            <div>
                <div>
                    <div class="cndzk-entrance-division  " style="margin-left: -5px;">
                        <div class="cndzk-entrance-division-header">
                                    <span class="cndzk-entrance-division-header-label">
                                        <div class="next-form-item-label"><label required="">地址信息:</label>
                                        </div>
                                    </span>
                            <div class="cndzk-entrance-division-header-click" id="openArea">
                                        <span class="cndzk-entrance-division-header-click-input">
<%--                                            判断是否需要修改，修改则进行数据渲染--%>
                                            <c:if test="${update}">
                                                <c:set var="addr" value="${fn:split(address.address, ' ')}"></c:set>
                                                <c:set var="addrCode" value="${fn:split(address.addressCode, ' ')}"></c:set>

                                                <c:forEach begin="0" end="${fn:length(addr)-1}" var="i" varStatus="st">
                                                    <span data-value="${addrCode[i]}">
                                                        <span class="cndzk-entrance-division-header-click-input-name">${addr[i]}</span>
                                                            <%-- 如果不是最后一个，才会分隔--%>
                                                        <c:if test="${!st.last}">
                                                            <span class="cndzk-entrance-division-header-click-input-symbol">/</span>
                                                        </c:if>
                                                    </span>
                                                </c:forEach>
                                            </c:if>
                                                <%--否则的话，就正常添加--%>
                                            <c:if test="${!update}">
                                                <p class="placeholder">请选择省/市/区</p>
                                            </c:if>
                                        </span>
                                <span class="cndzk-entrance-division-header-click-icon iconfont icon-new_xiajiantou"></span>
                                <%-- 两个隐藏按钮，用于提交表单--%>
                                <input type="hidden" name="address" id="address" value="${address.address}"/>
                                <input type="hidden" name="addressCode" id="addressCode" value="${address.addressCode}"/>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div>
                <div class="error-msg" id="areaError"></div>
            </div>
            <div>
                <div class="cndzk-entrance-associate "><span class="cndzk-entrance-associate-title"><div
                        class="next-form-item-label"><label required="">详细地址:</label></div></span>
                    <div class="cndzk-entrance-associate-area" id="detail-box">
                        <textarea class="cndzk-entrance-associate-area-textarea" rows="2" cols="20" placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息" name="detail" id="detail">${address.detail}</textarea>
                    </div>
                </div>
            </div>
            <div>
                <div class="error-msg" id="detailError"></div>
            </div>
        </div>
        <div dir="ltr" role="row" class="next-row next-form-item next-left next-medium">
        </div>
        <div dir="ltr" role="row" class="next-row next-form-item next-left next-medium">
            <div dir="ltr" role="gridcell" class="next-col next-form-item-label">
                <label required="">收货人姓名:</label>
            </div>
            <div dir="ltr" role="gridcell" class="next-col next-col-19 next-form-item-control">
                            <span class="next-input next-medium" id="consignee-box">
                                <input id="consignee" placeholder="长度不超过25个字符" name="consignee" height="100%" autocomplete="off" value="${address.consignee}">
                            </span>
                <div class="error-msg not-ml" id="fullNameError"></div>
            </div>
        </div>
        <div dir="ltr" role="row" class="next-row next-form-item next-left next-medium form-item-mobile">
            <div dir="ltr" role="gridcell" class="next-col next-form-item-label">
                <label required="">手机号码:</label>
            </div>
            <div dir="ltr" role="gridcell" class="next-col next-col-19 next-form-item-control">
                <div dir="ltr" role="row" class="next-row" style="margin-left: -2px; margin-right: -2px;">
                    <div dir="ltr" role="gridcell" class="next-col next-col-14" style="padding-left: 2px; padding-right: 2px;">
                        <div class="next-form-item next-medium">
                            <div class="next-form-item-control">
                                            <span data-meta="Field" class="next-input next-medium" id="phone-box">
                                                <input id="phone" placeholder="电话号码、手机号码必须填一项" name="phone" height="100%" autocomplete="off" value="${address.phone}">
                                            </span>
                                <div class="error-msg not-ml" id="phoneError"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div dir="ltr" role="row" class="next-row next-form-item next-left next-medium">
            <div dir="ltr" role="gridcell" class="next-col next-form-item-label">
                <label> </label>
            </div>
            <div dir="ltr" role="gridcell" class="next-col next-col-19 next-form-item-control">
                <label class="next-checkbox-wrapper ">
                                <span class="next-checkbox">
                                    <span class="next-checkbox-inner">
                                        <i class="next-icon next-icon-select next-xs"></i>
                                    </span>
                                    <input data-meta="Field" id="setDefault" type="checkbox" aria-checked="false" class="next-checkbox-input" value="" ${address.defaultAddress == 1?"checked":""}>
                                        <input type="hidden" name="defaultAddress" id="defaultAddress" value="${address.defaultAddress == 1?1:0}"/>
                                </span>
                    <span class="next-checkbox-label">设置为默认收货地址</span>
                </label>
            </div>
        </div>
        <div dir="ltr" role="row" class="next-row next-form-item next-left next-medium">
            <div dir="ltr" role="gridcell" class="next-col next-form-item-label"><label> </label></div>
            <div dir="ltr" role="gridcell" class="next-col next-col-19 next-form-item-control">
                <button type="submit" class="next-btn next-medium next-btn-primary" id="modify">
                    <span class="next-btn-helper">保存</span>
                </button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/self/user/modifyAddress.js"></script>
</body>
</html>
